<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <!--      <el-collapse-item title="item.name" name="key">-->
      <!--        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>-->
      <!--        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>-->
      <!--      </el-collapse-item>-->
      <el-collapse-item
        v-for="(item, index) in resultData"
        :key="index"
        :title="'计算结果文件' + item.resultName"
        :name="index"
      >
        <!--        <div v-for="res in item.results">-->
        <!--          {{res.originName}}-->
        <!--          <el-button type="text" @click="fileDownLoad(res)">下载</el-button></div>-->
        <el-table
          :data="item.results"
          style="width: 100%"
          :default-sort="{ prop: 'oid', order: 'descending' }"
          max-height="300px"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="originName"
            :label="tempDesc.originName"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="fileCreateTime"
            :label="tempDesc.fileCreateTime"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="fileSize"
            :label="tempDesc.fileSize"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            prop="type"
            :label="tempDesc.type"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="fileDownLoad(scope.row)"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import { downloadAction } from '@/api/action'
  const tempDesc = {
    originName: '文件名',
    fileCreateTime: '创建时间',
    type: '类型',
    fileSize: '文件大小',
  }
  export default {
    name: 'CollapseResult',
    props: {
      resultData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        tempDesc: tempDesc,
        activeNames: ['1'],
        baseUrl: {
          downloadUrl: '/presoftasim/common/downloadFile',
        },
      }
    },
    methods: {
      handleChange(val) {
        console.log(val)
      },
      fileDownLoad(fileDetail) {
        let url = this.baseUrl.downloadUrl
        downloadAction(url, { filePath: fileDetail.diskPath }).then((res) => {
          if (!res) {
            this.$message.warning('文件下载失败')
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(
              new Blob([data], { type: 'application/vnd.ms-excel' }),
              fileName
            )
          } else {
            let url = window.URL.createObjectURL(
              new Blob([res], { type: 'application/vnd.ms-excel' })
            )
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileDetail.originName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
          }
        })
      },
    },
  }
</script>

<style scoped>
  .el-collapse {
    /* border-top: 1px solid #EBEEF5; */
    /* border-bottom: 1px solid #EBEEF5; */
    margin: 15px;
  }
</style>
